<template>
    <div>

      <el-row>
        <!--左边的区域 字典组-->
        <el-col :span="10">
          <el-card>

            <el-row>
              <el-col :span="14">
                <el-input placeholder="请输入内容" v-model="searchDictGroup" clearable size="mini"></el-input>
              </el-col>
              <el-col :span="4" class="middlePosition">
                <el-button type="primary" size="mini" @click="getDictGroupListPageBefore()">查询</el-button>
              </el-col>
              <el-col :span="6" class="middlePosition">
                <el-button type="warning" size="mini" @click="openSaveDictGroup">新增</el-button>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-table
                  :data="tableDictGroupData"
                  @row-click="dictGroupRowClick"
                  max-height="700px"
                  height="700px"
                  style="width: 100%">

                  <el-table-column
                    prop="name"
                    label="字典组名称"
                  >
                  </el-table-column>

                  <el-table-column
                    prop="code"
                    label="字典组代码"
                    width="100">
                  </el-table-column>

                  <el-table-column
                    prop="baseData"
                    label="基础数据"
                    width="100">
                    <template slot-scope="scope">
                      <el-tag
                        size="mini"
                        :type="scope.row.baseData === 1 ? 'primary' : 'success'"
                        disable-transitions>{{baseDataChina(scope.row.baseData)}}
                      </el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
                    <template slot-scope="scope">
                      <el-button @click="selectDictGroup(scope.row)" type="text" size="small"><i class="el-icon-view"></i> 查看</el-button>
                      <el-button @click="openUpdDictGroup(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                      <el-button @click="delDictGroupByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                  </el-table-column>

                </el-table>

                <!--分页部分-->
                <el-pagination
                  style="width:33%; margin-right:10px"
                  background
                  layout="total, prev, pager, next, jumper"
                  @current-change="dictGroupPageCurrentChange"
                  :page-size="dictGroupSize"
                  :current-page="dictGroupCurrent"
                  :pager-count="5"
                  :total="dictGroupTotal">
                </el-pagination>
              </el-col>
            </el-row>

          </el-card>
        </el-col>



        <!--右边的区域 字典 -->
        <el-col :span="14" class="middlePosition">
          <el-card>

            <el-row>
              <el-col :span="24" class="middlePosition" >
                <el-button type="warning" size="mini" @click="openSaveDict">新增字典</el-button>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-table
                  :data="tableDictData"
                  max-height="700px"
                  height="700px"
                  style="width: 100%">

                  <el-table-column
                    prop="name"
                    label="字典名称"
                  >
                  </el-table-column>

                  <el-table-column
                    prop="code"
                    label="字典代码"
                    >
                  </el-table-column>

                  <el-table-column
                    prop="value"
                    label="数据值"
                    show-overflow-tooltip
                    width="200">
                  </el-table-column>

                  <el-table-column
                    prop="baseData"
                    label="基础数据"
                    width="100">
                    <template slot-scope="scope">
                      <el-tag
                        size="mini"
                        :type="scope.row.baseData === 1 ? 'primary' : 'success'"
                        disable-transitions>{{baseDataChina(scope.row.baseData)}}
                      </el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
                    <template slot-scope="scope">
                      <el-button @click="selectDict(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
                      <el-button @click="openUpdDict(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                      <el-button @click="delDictByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                  </el-table-column>

                </el-table>

                <!--分页部分-->
                <el-pagination
                  style="width:33%; margin-right:10px"
                  background
                  layout="total, prev, pager, next, jumper"
                  @current-change="dictPageCurrentChange"
                  :page-size="dictSize"
                  :current-page="dictCurrent"
                  :pager-count="5"
                  :total="dictTotal">
                </el-pagination>
              </el-col>
            </el-row>

          </el-card>
        </el-col>
      </el-row>


      <!--字典组弹出框-->
      <DictGroupSaveUpd ref="dictGroupSaveUpd" @getDictGroupListPage="getDictGroupListPage"></DictGroupSaveUpd>
      <!--字典弹出框-->
      <DictSaveUpd ref="dictSaveUpd" @getDictListPage="getDictListPage"></DictSaveUpd>

    </div>
</template>

<script>

  import http from '@/utils/http'
  import DictGroupSaveUpd from './DictGroupSaveUpd.vue'
  import DictSaveUpd from './DictSaveUpd.vue'

  export default {
    name: "DictGroup",
    components: {
      DictGroupSaveUpd,
      DictSaveUpd,
    },
    data(){
      return {
        // 字典搜索框
        searchDictGroup: null,
        // 当前选中的字典组
        searchDataDictGroup: null,
        // 字典组列表数据
        tableDictGroupData: [],
        // 每页记录数-字典组
        dictGroupSize: 30,
        // 当前页码 - 字典组
        dictGroupCurrent: 1,
        // 总记录数 - 字典组
        dictGroupTotal: 0,

        // 字典列表
        tableDictData: [],
        // 每页记录数-字典
        dictSize: 30,
        // 当前页码 - 字典
        dictCurrent: 1,
        // 总记录数 - 字典
        dictTotal: 0,
      }
    },
    methods: {
      /**
       * 当字典组一行表格被点击的时候触发事件
       * @param row 这一行数据
       * @param column 哪一列
       * @param event 事件
       */
      dictGroupRowClick(row, column, event){
        this.dictCurrent = 1
        this.searchDataDictGroup = row
        this.getDictListPage()
      },
      /**
       * 是否基础数据转中文
       * @param item 代码
       */
      baseDataChina(item){
        if (item === 1){
          return "否"
        } else {
          return "基础数据"
        }
      },
      /**
       * 根据ID删除字典 提示信息
       * @param row 当前行数据
       */
      delDictByIdTips(row){
        this.$confirm('是否删除字典, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delDictById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据ID删除字典
       * @param row 当前行数据
       */
      delDictById(row){
        http.post("/dict/delDictById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getDictListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据ID删除字典组 提示信息
       * @param row 当前行数据
       */
      delDictGroupByIdTips(row){
        this.$confirm('是否删除字典组, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delDictGroupById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据ID删除字典组
       * @param row 当前行数据
       */
      delDictGroupById(row){
        http.post("/dict/delDictGroupById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getDictGroupListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 字典组分页被改变的时候
       * @param value 当前页
       */
      dictGroupPageCurrentChange(value){
        this.dictGroupCurrent = value
        this.getDictGroupListPage()
      },
      /**
       * 字典分页被改变的时候
       * @param value 当前页
       */
      dictPageCurrentChange(value){
        this.dictCurrent = value
        this.getDictListPage()
      },
      /**
       * 字典组查看
       * @param row 当前行数据
       */
      selectDictGroup(row){
        this.$refs.dictGroupSaveUpd.openPage('select', row)
      },
      /**
       * 字典查看
       * @param row 当前行数据
       */
      selectDict(row){
        this.$refs.dictSaveUpd.openDictPage('select', row, this.searchDataDictGroup)
      },
      /**
       * 打开保存字典组弹出框
       */
      openSaveDictGroup(){
        this.$refs.dictGroupSaveUpd.openPage('save', null)
      },
      /**
       * 打开保存字典弹出框
       */
      openSaveDict(){
        if (!this.searchDataDictGroup){
          this.$message.warning("请先选择字典组");
          return
        }
        this.$refs.dictSaveUpd.openDictPage('save', null, this.searchDataDictGroup)
      },
      /**
       * 打开-修改字典组
       */
      openUpdDictGroup(row){
        this.$refs.dictGroupSaveUpd.openPage('upd', row)
      },
      /**
       * 打开-修改字典
       */
      openUpdDict(row){
        this.$refs.dictSaveUpd.openDictPage('upd', row, this.searchDataDictGroup)
      },
      /**
       * 分页查询字典
       */
      getDictListPage(){
        http.post("/dict/getDictListPage", {
          // 分页参数
          current: this.dictCurrent,
          size: this.dictSize,
          groupId: this.searchDataDictGroup.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.dictTotal = data.total;
          this.dictCurrent = data.current;
          this.dictSize = data.size;
          // 处理数据
          this.tableDictData = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 查询前重置分页参数
       */
      getDictGroupListPageBefore(){
        this.dictGroupCurrent = 1
        this.getDictGroupListPage()
      },
      /**
       * 分页查询字典组
       */
      getDictGroupListPage(){
        http.post("/dict/getDictGroupListPage", {
          // 分页参数
          current: this.dictGroupCurrent,
          size: this.dictGroupSize,
          name: this.searchDictGroup,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.dictGroupTotal = data.total;
          this.dictGroupCurrent = data.current;
          this.dictGroupSize = data.size;
          // 处理数据
          this.tableDictGroupData = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.$store.commit('navigationListChange', ['字典配置'])
      this.getDictGroupListPage()
    },
  }
</script>

<style scoped>

  .middlePosition {
    padding-left: 5px
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }

</style>
